<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="./dist/el-table-edit.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./dist/el-table-edit.min.css">
</head>

<body>
  <div id="app">
    <el-table-edit :data="tableData" :columns="columns" border style="width: 100%">
    </el-table-edit>
  </div>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          columns: [
            // {
            //   type:'index',
            //   index:index => index * 2,
            //   fixed:'left'
            // },
            {
              type:"selection",
              fixed:'left'
            },
            {
              title: "关联角色",
              key: "roleName",
              width: 100,
              fixed:"left"
            },
            {
              title: "用户名",
              key: "userName",
              edit: true,
              rules: [
                { required: true, message: "请输入用户名" },
                {
                  min: 3,
                  max: 5,
                  message: "长度在 3 到 5 个字符",
                },
              ],
              clearable: true,
            },
            {
              title: "用户密码",
              key: "password",
              edit: true,
              clearable: true,
            },
            {
              title: "姓名",
              key: "name",
              edit: true,
              clearable: true,
            },
            {
              title: "性别",
              key: "sex",
              type: "select",
              options: [
                {
                  label: "未知",
                  value: "0",
                },
                {
                  label: "男",
                  value: "1",
                },
                {
                  label: "女",
                  value: "2",
                },
              ],
              edit: true,
              clearable: true,
            },
            {
              title: "联系电话",
              key: "phone",
              edit: true,
              clearable: true,
            },
            {
              title: "邮箱",
              key: "email",
              edit: true,
              clearable: true,
            },
          ],
          tableData: [
            {
              id: "11111",
              userName: "admin",
              password: "123456",
              name: "蔡海",
              sex: "男",
              phone: "155********",
              email: "ch155********@163.com",
              roleId: "",
              roleName: "admin",
            },
            {
              id: "22222",
              userName: "admin",
              password: "123456",
              name: "蔡海",
              sex: "男",
              phone: "155********",
              email: "ch155********@163.com",
              roleId: "",
              roleName: "admin",
            },
          ],
        }
      }
    });
  </script>
</body>

</html>